import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { connect } from '@tarojs/redux'

// import { changeMethod } from '../../actions/client'

import './style.less';
import SubTitle from '../SubTitle'
import Enum from '../../constants/Enum'
import { changeMethod } from '../../store/actions/method'

@connect((state => state))
class Choice extends Component {
  navTo = (item) => {
    const { dispatch } = this.props
    dispatch(
      changeMethod({
        type: item.type,
        range: item.range
      })
    )
    Taro.navigateTo({
      url: '../../pages/practice/index'
    })
  }
  render() {
    let arr = [
      { type: Enum.addition, label: `加法练习(${Enum.range_0_9})`, range: Enum.range_0_9 },
      { type: Enum.addition, label: `加法练习(${Enum.range_10_19})`, range: Enum.range_10_19 },
      { type: Enum.subtraction, label: `减法练习(${Enum.range_0_9})`, range: Enum.range_0_9 },
      { type: Enum.subtraction, label: `减法练习(${Enum.range_10_19})`, range: Enum.range_10_19 },
      // { type: Enum.multiplication,  label: '乘法练习' },
      // { type: Enum.division, label: '除法练习' },
    ]
    return (
      <View className='choice' >
        <View className='label' >
          <SubTitle title='请选择一种练习方式' />
        </View>
        {
          arr.map((item, i) => (
            <View key={i} className='btn' onClick={this.navTo.bind(this, item)} >
              <View className='type' >{item.type}</View>
              <View className='text' >{item.label}</View>
              <View className='start' >></View>
            </View>
          ))
        }
      </View>
    )
  }
}

export default Choice;
